<template>
    <div class="common-view-list" v-loading="options.isLoading" v-if="options">    
        <template v-for="item in data">
            <div class="common-view-list-view" :style="{ 'width': options.width + 'px', 'height': options.height + 'px' }" :key="item[options.key]" @click="handleViewClick(item)">
                <slot :data="item"></slot>
            </div>
        </template>       
    </div>
</template>

<script>
export default {
    name: 'CommonViewList',
    props: {      
        options: {
            type: Object,
            required: true
        },    
        data: {
            type: Array,
            default: () => []
        }    
    },
    data () {
        return {

        }
    },
    methods: {
        handleViewClick(value) {
            this.$emit('handleViewClick', value)
        }
    }
}
</script>

<style scoped>
.common-view-list {
    width: 100%;
    flex: 1;
    overflow-y: auto;
    border-bottom: 1px solid #ebeef5;
    padding: 5px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center
}
.common-view-list-view {
    cursor: pointer;
    border: 1px solid #ebeef5;
    margin: 5px
}
</style>